<template>
  <div class="vc-page vc-page-parts">
    <!-- 左侧 - 组织机构树 -->
    <el-tree-sider
      tree-title="组织机构树"
      node-icon="vc-icon vc-icon-tree-org"
      :data="orgTreeData"
      :default-checked-node="defaultChecked"
      @refresh="getAllOrg"
      @node-click="handleNodeClick"/>

    <!-- 右侧 - 子孙组织机构列表 -->
    <div class="part-right">
      <!-- 查询条件 -->
      <query-terms ref="queryTerms" :searchConfig="searchConfig"/>

      <!-- 操作按钮 -->
      <div class="vc-btns">
        <el-button type="primary" size="small" @click="addDialogVisible = true">新增</el-button>
        <el-button size="small" :disabled="selectedIds.length === 0" @click="batchDel">删除</el-button>
      </div>

      <!-- 列表展示 -->
      <div class="vc-table">
        <tables
          v-model="tableConfig.tableData"
          :columns="tableConfig.columns"
          :stripe="true"
          @on-selection-change="handleSelectionChange"/>

        <el-pagination
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          :page-size="GLOBAL.QUERY.PAGE_SIZE"
          :total="total"
          layout="total, prev, pager, next">
        </el-pagination>
      </div>
    </div>

    <!-- 新增 -->
    <add-org :pid="id" :lvl="lvl" :dialogVisible="addDialogVisible" @close="closeAddDialog"></add-org>

    <!-- 修改 -->
    <edit-org :entity="entity" :dialogVisible="editDialogVisible" @close="closeEditDialog"></edit-org>

  </div>
</template>

<script>
import AddOrg from './add'
import EditOrg from './edit'

export default {
  name: 'org',
  components: { AddOrg, EditOrg },
  data () {
    return {
      // 组织机构树
      orgTreeData: null,
      defaultChecked: {},
      // 查询条件
      searchConfig: {
        items: [
          {
            key: 'name',
            title: '名称'
          },
          {
            key: 'code',
            title: '编码'
          },
          {
            key: 'type',
            title: '类型',
            type: 'select',
            placeholder: '请选择',
            groups: this.$store.state.dic.listFormat['ZZJGLX']
          },
          {
            key: 'state',
            title: '状态',
            type: 'select',
            placeholder: '请选择',
            groups: this.$store.state.dic.listFormat['ZZJGZT']
          }
        ],
        search: params => {
          this.search(params)
        },
        reset: () => {
          this.reset()
        },
        params: {}
      },
      id: '',
      lvl: -1,
      searchData: {
        name: '',
        code: '',
        type: '',
        state: ''
      },
      // 列表
      tableConfig: {
        columns: [
          {
            type: 'selection'
          },
          {
            type: 'index'
          },
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '简称',
            key: 'sname'
          },
          {
            title: '编码',
            key: 'code'
          },
          {
            title: '类型',
            key: 'type',
            formatType: row => this.GLOBAL.formatter.formatTableCol(row.type, 'ZZJGLX')
          },
          {
            title: '级别',
            key: 'lvl',
            minWidth: '70',
            formatType: row => this.GLOBAL.formatter.formatTableCol(row.lvl, 'zzjgjb')
          },
          {
            title: '状态',
            key: 'state',
            formatType: row => this.GLOBAL.formatter.formatTableCol(row.state, 'ZZJGZT')
          },
          {
            title: '显示排序',
            key: 'showOrder',
            minWidth: '100'
          },
          {
            title: '创建时间',
            key: 'createTime',
            minWidth: '110',
            formatType: row => this.GLOBAL.formatter.formatDateTime(row.createTime)
          },
          {
            type: 'option',
            minWidth: '48',
            items: [
              {
                title: '修改',
                class: 'edit',
                click: row => {
                  this.handleEdit(row)
                }
              }
            ]
          }
        ],
        tableData: []
      },
      currentPage: 1,
      total: 0,
      selectedIds: [],
      entity: {},
      addDialogVisible: false,
      editDialogVisible: false
    }
  },
  mounted () {
  },
  methods: {
    /**
     * 获取左侧组织机构树数据
     */
    getAllOrg () {
      this.$api.getAllOrg().then(res => {
        if (!res.success || !res.data || !res.data.length) {
          this.orgTreeData = []
          this.treeEmptyText = this.GLOBAL.QUERY.EMPTY_TEXT
          this.emptyTableData()
          return
        }
        this.orgTreeData = this.GLOBAL.array.transToTreeData(res.data)
        this.defaultChecked = this.orgTreeData[0]
      })
    },
    /**
     * 树节点被点击时的回调
     */
    handleNodeClick (data, node) {
      this.id = data.id
      this.lvl = data.lvl
      !node ? this.getDescendantsByDim(data.id) : this.$refs.queryTerms.reset()
    },
    /**
     * 获取右侧列表数据
     */
    getDescendantsByDim (id, pageNum = this.currentPage, pageSize = this.GLOBAL.QUERY.PAGE_SIZE, entity = this.searchData) {
      this.$api.getDescendantsByDim({
        data: {
          id: id,
          pageNum: pageNum,
          pageSize: pageSize,
          params: entity
        }
      }).then(res => {
        if (!res.success || !res.data.total) {
          this.emptyTableData()
          return
        }
        if (!res.data.records || !res.data.records.length) {
          this.currentPage--
          this.getDescendantsByDim(id)
          return
        }
        this.tableConfig.tableData = res.data.records
        this.total = res.data.total
        this.currentPage = res.data.current
      }).catch(() => {
        this.emptyTableData()
      })
    },
    /**
     * 清空表格数据
     */
    emptyTableData () {
      this.tableConfig.tableData = []
      this.total = 0
      this.currentPage = 1
    },
    /**
     * 点击页数
     */
    handleCurrentChange (val) {
      this.getDescendantsByDim(this.id, val)
    },
    /**
     * 查询
     */
    search (params) {
      this.searchData = this.GLOBAL.filter.filterSpace(params)
      this.currentPage = 1
      this.getDescendantsByDim(this.id)
    },
    /**
     * 重置
     */
    reset () {
      this.search(this.GLOBAL.object.clearValOfObj(this.searchData))
    },
    /**
     * '新增'弹出框关闭事件
     */
    closeAddDialog (val) {
      this.addDialogVisible = false
      if (!val) return
      this.searchConfig.params = this.GLOBAL.object.clearValOfObj(this.searchConfig.params)
      this.searchData = {}
      this.currentPage = 1
      this.getAllOrg()
    },
    /**
     * 复选框勾选
     */
    handleSelectionChange (val) {
      this.selectedIds = this.GLOBAL.array.selectOneKey(val, 'id')
    },
    /**
     * '删除'按钮点击事件
     */
    batchDel () {
      this.$confirmBox(this.handleDel)
    },
    /**
     * 删除
     */
    handleDel () {
      this.$api.deleteOrgByIds({
        data: this.selectedIds
      }).then(res => {
        this.getAllOrg()
        res.success && this.$notifyBox('删除成功', 'success')
      })
    },
    /**
     * 操作列-修改
     */
    handleEdit (row) {
      this.entity = Object.assign({}, row)
      this.editDialogVisible = true
    },
    /**
     * '修改'弹出框关闭事件
     */
    closeEditDialog (val) {
      this.editDialogVisible = false
      val && this.getAllOrg()
    }
  }
}
</script>
